<!--
 * @Author: feng.gan 675198494@qq.com
 * @Date: 2025-04-24 11:46:43
 * @LastEditors: feng.gan 675198494@qq.com
 * @LastEditTime: 2025-04-24 14:32:00
 * @FilePath: \vue3-demo\src\views\TestElementPlus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koroFileHeader/wiki/%E9%85%8D%E7%BD%A9
-->
<style>
.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.flipper {
  position: relative;
  width: 50px;
  height: 80px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-container.flip .flipper {
  transform: rotateX(180deg);
}

.number-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.number-wrapper .number {
  font-size: 2em;
  color: #fff;
  background-color: #333;
  border-radius: 5px;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-wrapper .front {
  transform: rotateX(0deg);
}

.number-wrapper .back {
  transform: rotateX(180deg);
}

.number-wrapper .gap {
  position: absolute;
  height: 2px;
  /* 断层高度 */
  width: 80%;
  /* 断层宽度 */
  background-color: #fff;
  /* 断层颜色 */
  margin-top: 5px;
}
</style>
<template>
  <div class="flip-container" ref="flipContainer">
    <div class="flipper">
      <div class="number-wrapper">
        <div class="number front">{{ currentNumber }}</div>
        <div class="number back">{{ nextNumber }}</div>
        <div class="gap"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['1','2','3','4']);
const flipContainer = ref(null);
const currentNumber = ref(items.value[0]);
const nextNumber = ref(items.value[1]);

let currentIndex = 0;

// setInterval(() => {
//   if (flipContainer.value) {
//     // 设置下一个数字
//     nextNumber.value = items.value[(currentIndex + 1) % items.value.length];
//     flipContainer.value.classList.add('flip');

//     setTimeout(() => {
//       // 更新当前数字
//       currentIndex = (currentIndex + 1) % items.value.length;
//       currentNumber.value = items.value[currentIndex];
//       flipContainer.value.classList.remove('flip');
//     },600); // 等待翻转动画完成后更新数字
//   }
// },2000);
</script>